<template>
  <!-- 这是就医服务的页面。相关的功能需要点击跳转 -->
  <div class="service-page">
    <!-- 导航栏 -->
    <van-nav-bar title="就医服务" left-text="返回" left-arrow @click-left="back">
      <template #right>
        <van-icon name="ellipsis" size="18" @click="showShare = true"/>
        <van-share-sheet
          v-model:show="showShare"
          title="立即分享给好友"
          :options="shareOptions"
          @select="onShareSelect"
        />
      </template>
    </van-nav-bar>
    
    <!-- 主要服务区块 -->
    <div class="service-container">
      <van-grid 
        :border="false" 
        :column-num="3" 
        square
        class="service-grid"
      >
        <van-grid-item to="/reports" class="grid-item">
          <div class="icon-wrapper">
            <van-icon name="description" size="28" color="#1989fa" />
          </div>
          <span class="service-name">报告查询</span>
        </van-grid-item>
        
        <van-grid-item to="/queue" class="grid-item">
          <div class="icon-wrapper">
            <van-icon name="calendar-o" size="28" color="#0c0fc1" />
          </div>
          <span class="service-name">查看叫号</span>
        </van-grid-item>
        
        <van-grid-item to="/payment" class="grid-item">
          <div class="icon-wrapper">
            <van-icon name="cash-back-record" size="28" color="#ff976a" />
          </div>
          <span class="service-name">在线缴费</span>
        </van-grid-item>
        
        <!-- 新增服务项 -->
        <!-- <van-grid-item to="/medication" class="grid-item">
          <div class="icon-wrapper">
            <van-icon name="medal-o" size="28" color="#ee0a24" />
          </div>
          <span class="service-name">药品购买</span>
        </van-grid-item>
        
        <van-grid-item to="/consult" class="grid-item">
          <div class="icon-wrapper">
            <van-icon name="chat-o" size="28" color="#ffb11a" />
          </div>
          <span class="service-name">在线咨询</span>
        </van-grid-item> -->
        
        <van-grid-item to="/home" class="grid-item" >
          <div class="icon-wrapper">
            <van-icon name="location-o" size="28" color="#646566" />
          </div>
          <span class="service-name">医院导航</span>
        </van-grid-item>
      </van-grid>
    </div>
    
    <!-- 热门服务推荐 -->
    <div class="recommend-section">
      <h2 class="section-title">热门服务</h2>
      <van-grid :border="false" :column-num="2" class="recommend-grid">
        <van-grid-item 
          v-for="(item, index) in recommendServices" 
          :key="index" 
          class="recommend-item"
          @click="goToService(item.path)"
        >
          <div class="recommend-content">
            <van-icon :name="item.icon" size="24" :color="item.color" />
            <div class="recommend-text">
              <h3>{{ item.title }}</h3>
              <p>{{ item.desc }}</p>
            </div>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
    
    <!-- 快捷入口 -->
    <div class="quick-actions">
      <van-grid :border="false" :column-num="4" class="quick-grid">
        <van-grid-item 
          v-for="(action, index) in quickActions" 
          :key="index"
          @click="handleQuickAction(action)"
        >
          <van-icon :name="action.icon" size="20" :color="action.color" />
          <span>{{ action.name }}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { showToast } from 'vant';
import { useRouter } from 'vue-router';

const router = useRouter();
const showShare = ref(false);

// 分享选项
const shareOptions = ref([
  { name: '微信', icon: 'wechat' },
  { name: '朋友圈', icon: 'wechat-moments' },
  { name: '微博', icon: 'weibo' },
  { name: 'QQ', icon: 'qq' },
]);

// 返回上一页
const back = () => {
  router.push('/home');
};

// 分享选择
const onShareSelect = (option) => {
  showToast(`已分享到${option.name}`);
  showShare.value = false;
};

const recommendServices = ref([
  {
    title: '专家门诊',
    desc: '三甲医院专家号源',
    icon: 'user-o',
    color: '#1989fa',
    path: '/register'
  },
  {
    title: '体检预约',
    desc: '专业体检套餐',
    icon: 'flower-o',
    color: '#07c160',
    path: '/healthManagement'
  },
  // {
  //   title: '核酸检测',
  //   desc: '快速检测预约',
  //   icon: 'cluster-o',
  //   color: '#ee0a24',
  //   path: '/nucleic'
  // },
  // {
  //   title: '疫苗接种',
  //   desc: '预约疫苗接种',
  //   icon: 'shield-o',
  //   color: '#ffb11a',
  //   path: '/vaccine'
  // }
]);

const quickActions = ref([
  { name: '急救电话', icon: 'phone-o', color: '#ee0a24' },
  { name: '意见反馈', icon: 'comment-o', color: '#ff976a' }
]);

const goToService = (path) => {
  router.push(path);
};

const handleQuickAction = (action) => {
  if (action.name === '急救电话') {
    window.location.href = 'tel:120';
  } else {
    showToast(`点击了: ${action.name}`);
  }
};
</script>

<style scoped>
.service-page {
  padding: 16px;
  background-color: #f7f8fa;
  min-height: 100vh;
}

.service-container {
  padding: 16px;
  background-color: #fff;
  border-radius: 12px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  transition: all 0.3s ease;
}

.grid-item:hover {
  transform: translateY(-3px);
}

.icon-wrapper {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: rgba(25, 137, 250, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.service-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.recommend-section {
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 16px;
}

.recommend-item {
  padding: 12px;
}

.recommend-content {
  display: flex;
  align-items: center;
  width: 100%;
}

.recommend-content .van-icon {
  margin-right: 12px;
  flex-shrink: 0;
}

.recommend-text h3 {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 4px 0;
  color: #333;
}

.recommend-text p {
  font-size: 12px;
  color: #999;
  margin: 0;
}

.quick-actions {
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.quick-grid {
  text-align: center;
}

.quick-grid .van-icon {
  margin-bottom: 8px;
}

.quick-grid span {
  font-size: 12px;
  color: #666;
}
</style>